import React, { memo,useEffect } from 'react'
import { Form, Input, Button, Switch } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { message } from 'antd';
import {useHistory} from 'react-router-dom'
import * as echarts from 'echarts';
import {login} from '@/api/user'
import './index.css'
export default memo(function Login() {
  const history = useHistory()
  useEffect(()=>{
    painUooki()
  },[])
  const painUooki = ()=>{
    let myChart = echarts.init(document.getElementById('uooki'));
    // 指定图表的配置项和数据
    let option = {
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: 'uooki',
              fontSize: 60,
              fontWeight: 'bold',
              lineDash: [0, 200],
              lineDashOffset: 0,
              fill: 'transparent',
              stroke: '#000',
              lineWidth: 1
            },
            keyframeAnimation: {
              duration: 4000,
              loop: false,
              keyframes: [
                {
                  percent: 0.2,
                  style: {
                    fill: 'transparent',
                    lineDashOffset: 300,
                    lineDash: [200, 0]
                  }
                },
                {
                  // Stop for a while.
                  percent: 0.4,
                  style: {
                    fill: 'transparent'
                  }
                },
                {
                  percent: 0.6,
                  style: {
                    fill: 'white'
                  }
                }
              ]
            }
          }
        ]
      }
    };
    console.log('painted');
  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option);
  }
  const onFinish = async (values) => {
    const res = await login(values)
    switch (res.data.code) {
      case 401:
        message.error(res.data.message);
        break;
      case 304:
        message.warn('账号不存在');
        break;
      case 208:
        message.warn('密码错误');
        break;
      case 200:
        message.success("登录成功");
        localStorage.setItem('uooki-token',res.data.token);
        localStorage.setItem('closeIcon',false)
        history.replace("/home/classIndex") // 跳转到首页
        break;
      default:
        message.warn('登录失败，请仔细检查账号和密码');
        break;
    }
  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

  const register = () => {
    history.push("/register")
  }

  return (
    <div className="bg-login bg-cover w-full h-screen bg-gray-300 relative">
      <div className="flex flex-col justify-center items-center absolute z-1 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/2 h-3/4 bg-gray-700" style={{minWidth:350}}>
        <div className="h-20 text-4xl font-bold text-white" id='uooki' style={{width:200,height:160}}>Uooki</div>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 24 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label=""
            name="telephone"
            rules={[{ required: true, message: '请输入手机号!' }]}
          >
            <Input
              className="rounded-full w-80 h-10 "
              placeholder="手机号"
              prefix={<UserOutlined className="site-form-item-icon" />}
            />
          </Form.Item>

          <Form.Item
            label=""
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password
              className="rounded-full  w-80 h-10"
              placeholder="密码"
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 16 }}>
            <Button
              type="primary"
              htmlType="submit"
              className="rounded-full w-80 h-10"
            >
              登录
            </Button>
          </Form.Item>
          <div className="w-80 flex justify-between text-white">
            <div style={{display:'inline-block'}}>
              <Form.Item
                wrapperCol={{ span: 13 }}
                labelCol={{ span: 14 }}
                label="记住密码"
                name="remember"
                valuePropName="checked"
                className='rememberPassword'
              >
                <Switch/>
              </Form.Item>
            </div>
            <div className='cursor-pointer'>忘记密码</div>
          </div>
        </Form>

        <div className="w-80 h-5 flex justify-between text-white">
          <div onClick={register} className='cursor-pointer'>创建账号</div>
          <a className='cursor-pointer' href="tencent://message/?uin=1843910685&Site=&Menu=yes">人工客服</a>
        </div>
      </div>
      {/* <a className="youpaiyun" href='https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral'></a> */}
    </div>
  )
})
